<template>
  <div class="music-header">
    <div class="header-icon"></div>
    <div class="header-text">Chicken Music</div>
  </div>
</template>

<script>
export default {
  name: 'MusicHeader'
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/variable.styl'
@import "~@/assets/stylus/mixin.styl"
.music-header
  position: relative
  height: 44px
  text-align: center
  color: $color-theme
  font-size: 0
  .header-icon
    display: inline-block
    vertical-align: top
    width: 30px
    height: 32px
    margin-top: 6px
    margin-right: 9px
    bg-image('../../../public/logo')
    background-size: cover
  .header-text
    display: inline-block
    vertical-align: top
    line-height: 44px
    font-size: $font-size-large
</style>
